<template>
  <div class="xxxxx">
    <div :id="picker_id"/>
  </div>
</template>

<script>
import XNColorPicker from './xn-color-picker/xncolorpicker'

export default {
  name: "ColorPicker",
  props: ['value'],
  data() {
    return {
      colorPicker: {}
    }
  },
  computed: {
    picker_id() {
      return 'color-picker-' + Math.floor(Math.random() * 1000000000);
    },
  },
  mounted() {
    this.colorPicker = new XNColorPicker({
      color: "linear-gradient(0.0deg,hsla(279,63%,58%,1) 0.0,hsla(198,83%,53%,1) 100.0%)",
      selector: '#' + this.picker_id,
      showprecolor: true,//显示预制颜色
      prevcolors: null,//预制颜色，不设置则默认
      showhistorycolor: true,//显示历史
      historycolornum: 16,//历史条数
      format: 'rgba',//rgba hex hsla,初始颜色类型
      showPalette: true,//显示色盘
      show: false, //初始化显示
      lang: 'cn',// cn 、en
      colorTypeOption: 'single,linear-gradient,radial-gradient',
      canMove: false,//选择器位置是否可以拖拽
      alwaysShow: false,
      autoConfirm: true,
      onError: function () {

      },
      onCancel: function (color) {
        console.log("cancel", color)
      },
      onChange: function (color) {
        console.log("change", color)
      },
      onConfirm: (color) => {
        let value;
        if (color.colorType === 'single') {
          value = color.color.rgba;
        } else if (color.colorType === 'linear-gradient') {
          value = {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: color.color.arry.colors[0].per / 100, color: color.color.arry.colors[0].color // 0% 处的颜色
            }, {
              offset: color.color.arry.colors[1].per / 100, color: color.color.arry.colors[1].color // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
        console.log({value})
        this.$emit("change", value);
      }
    })


  }
}
/* eslint-enable */
</script>

<style lang="scss" scoped>
</style>